import { get_assess_info } from '@/services/assrssment';
import age from '@/utils/age';
import gauge from '@/utils/gauge';
import { ProDescriptions, ProTable } from '@ant-design/pro-components';
import { Checkbox, Divider, Input, Modal, Radio, Typography } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { default as time, default as timeToHms } from '../../../utils/time';
import './doctor.less';
const { Title } = Typography;

interface Iprops {
  isShowDoctor: (show: boolean) => void;
  doctorisModalOpen: boolean;
  doctorId: number | undefined;
}
var question_data: any = [];

const DoctorEvaluationInfo = (props: Iprops) => {
  const { isShowDoctor, doctorisModalOpen, doctorId } = props;
  // 存储评估详情
  const [recordinfo, setrecordinfo] = useState<any>(undefined);
  // 居家处方训练条数与时长
  const [total_nums, settotal_nums] = useState(0);
  const [total_time, settotal_time] = useState('00:00:00');
  const actionRef = useRef();

  // 页面初始化
  useEffect(() => {
    question_data = [];
    // 获取评估详情信息
    const getData = async () => {
      if (doctorId) {
        let res: any = await get_assess_info({ id: doctorId });

        if (res.code === 200) {
          setrecordinfo(res.data);
          console.log('res', JSON.parse(res.data.content));
          JSON.parse(res.data.content).map((item: any) => {
            if (item) {
              question_data[item.question_id] = item;
            }
          });
          console.log(question_data);
          question_data.forEach(function (
            data: { type: string },
            index: string | number,
            arr: any,
          ) {
            if (data.type == 'checkbox') {
              let checkbox_value: any = [];
              console.log(data);
              let dataStrArr = question_data[index].question_answer.toString().split(','); //分割成字符串数组
              dataStrArr.forEach(function (data: string | number, index: any, arr: any) {
                checkbox_value.push(+data);
              });
              // console.log(checkbox_value);
              question_data[index].question_answer = checkbox_value;
            }
          });
          if (res.data.plan != null) {
            settotal_nums(res.data.plan.video.length);
            var sum = 0;
            // console.log(params);
            res.data.plan.video.map((item: any) => {
              sum += parseInt(String(item.video_time * item.number));
            });
            settotal_time(timeToHms(sum));
          }
        }
      }
    };
    getData();
  }, []);

  // 个人信息
  const get_oldinfo = async () => {
    return {
      data: recordinfo,
    };
  };
  // 居家处方信息
  const get_train = async () => {
    return {
      data: recordinfo.plan,
    };
  };

  // 处方信息
  const get_video = () => {
    var video_list = recordinfo.plan.video;
    for (let i = 0; i < video_list.length; i++) {
      video_list[i]['key'] = i;
    }
    return {
      data: recordinfo.plan.video,
      total: recordinfo.plan.video.length + 1,
    };
  };

  // 居家处方信息列表字段
  const columns: any = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      valueType: 'index',
      key: 'index',
    },
    {
      title: '视频名称',
      align: 'center',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '类型',
      align: 'center',
      dataIndex: 'video_type',
      key: 'video_type',
    },
    {
      title: '视频时长',
      align: 'center',
      hideInSearch: true,
      key: 'video_time',
      dataIndex: 'video_time',
      render: (_: any, record: { video_time: any }) => {
        return time(record.video_time);
      },
    },
    {
      title: '训练频次',
      align: 'center',
      dataIndex: 'number',
      key: 'number',
    },
  ];
  return (
    <Modal
      title="评估详情"
      open={doctorisModalOpen}
      onCancel={() => isShowDoctor(false)}
      footer={null}
      width={1100}
    >
      <Divider />
      <Typography>
        {/* 评估详情 */}
        {recordinfo != undefined ? (
          <>
            <ProDescriptions
              column={4}
              request={async (params) => get_oldinfo()}
              columns={[
                {
                  title: '姓名',
                  key: 'old_name',
                  dataIndex: 'old_name',
                },
                {
                  title: '身份证号',
                  key: 'id_card',
                  dataIndex: 'id_card',
                },
                {
                  title: '性别',
                  key: 'sex',
                  dataIndex: 'sex',
                  valueType: 'select',
                  valueEnum: {
                    0: {
                      text: '未知',
                    },
                    1: {
                      text: '男',
                    },
                    2: {
                      text: '女',
                    },
                  },
                },
                {
                  title: '出生日期',
                  key: 'birth',
                  dataIndex: 'birth',
                },
                {
                  title: '年龄',
                  render: (_, record) => {
                    if (record.birth != '') {
                      return age(record.birth) + '岁';
                    } else {
                      return '-';
                    }
                  },
                },
                {
                  title: '手机号',
                  key: 'phone',
                  dataIndex: 'phone',
                },
                {
                  title: '民族',
                  key: 'nation_name',
                  dataIndex: 'nation_name',
                },
                {
                  title: '家庭地址',
                  key: 'address',
                  dataIndex: 'address',
                },
              ]}
            ></ProDescriptions>
            {/* 评估内容 */}
            <Title level={5}>评估内容</Title>
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
              {gauge.map((item, key) => {
                if (item.question_id != 26) {
                  return (
                    <div className="question_item" key={key}>
                      <div className="question_title">{item.question_title}</div>
                      <div className="question_answer">
                        {item.type === 'radio' ? (
                          <Radio.Group
                            value={
                              question_data[key + 1]
                                ? parseInt(question_data[key + 1].question_answer)
                                : ''
                            }
                          >
                            {item.children != undefined
                              ? item.children.map((a, b) => {
                                  return (
                                    <Radio key={a.key} value={a.value}>
                                      {a.key}
                                    </Radio>
                                  );
                                })
                              : ''}
                          </Radio.Group>
                        ) : (
                          ''
                        )}

                        {item.type === 'checkbox' ? (
                          <Checkbox.Group
                            value={
                              question_data[key + 1] ? question_data[key + 1].question_answer : []
                            }
                          >
                            {item.children != undefined
                              ? item.children.map((a, b) => {
                                  return (
                                    <Checkbox key={a.key} value={a.value}>
                                      {a.key}
                                    </Checkbox>
                                  );
                                })
                              : ''}
                          </Checkbox.Group>
                        ) : (
                          ''
                        )}

                        {item.type === 'input' ? (
                          <Input
                            value={
                              question_data[key + 1] ? question_data[key + 1].question_answer : ''
                            }
                            style={{ width: '150px', height: '25px', display: 'inline' }}
                          />
                        ) : (
                          ''
                        )}
                      </div>
                    </div>
                  );
                } else {
                  return (
                    <div className="question_item2" key={key}>
                      <div className="question_title">{item.question_title}</div>
                      <div className="question_answer">
                        {item.type === 'checkbox' ? (
                          <Checkbox.Group
                            value={
                              question_data[key + 1] ? question_data[key + 1].question_answer : []
                            }
                            // onChange={(e) => checkbox_change(e, item.question_id)}
                          >
                            {item.children != undefined
                              ? item.children.map((a, b) => {
                                  return (
                                    <Checkbox
                                      key={a.key}
                                      value={a.value}
                                      style={{
                                        width: '172px',
                                        float: 'left',
                                        marginLeft: '8px',
                                        marginBottom: '35px',
                                      }}
                                    >
                                      {a.key}
                                    </Checkbox>
                                  );
                                })
                              : ''}
                          </Checkbox.Group>
                        ) : (
                          ''
                        )}
                      </div>
                    </div>
                  );
                }
              })}
            </div>
            {/* 居家处方信息 */}
            <Title level={5}>居家处方信息</Title>
            <ProDescriptions
              style={{
                padding: '20px',
              }}
              request={async (params) => get_train()}
              columns={[
                {
                  title: '训练周期',
                  key: 'days_number',
                  dataIndex: 'days_number',
                },
                {
                  title: '开始时间',
                  key: 'start_date',
                  dataIndex: 'start_date',
                },
                {
                  title: '结束时间',
                  key: 'end_date',
                  dataIndex: 'end_date',
                },
              ]}
            ></ProDescriptions>
            <ProTable
              columns={columns}
              actionRef={actionRef}
              request={async (params) => get_video()}
              rowKey={(record) => record.key}
              search={false}
              toolBarRender={false}
              size="middle"
              pagination={false}
              dateFormatter="string"
            />
            <p
              style={{
                padding: '5px 0 10px 0',
              }}
            >
              共计：<span style={{ color: 'red' }}>{total_nums}</span>条 总时长：
              <span style={{ color: 'red' }}>{total_time}</span>
            </p>
            <Title level={5}>评估信息</Title>
            <ProDescriptions
              style={{
                padding: '20px',
              }}
              request={async (params) => get_oldinfo()}
              columns={[
                {
                  title: '科室',
                  key: 'department_name',
                  dataIndex: 'department_name',
                },
                {
                  title: '医生',
                  key: 'doctor_name',
                  dataIndex: 'doctor_name',
                },
                {
                  title: '时间',
                  key: 'create_time',
                  dataIndex: 'create_time',
                },
              ]}
            ></ProDescriptions>
          </>
        ) : (
          ''
        )}
      </Typography>
    </Modal>
  );
};
export default DoctorEvaluationInfo;
